<template>
  <div class="container">
    <el-row>
      <div class="li">
        <el-button class="btn" type="primary" round @click="jumpToAction"
          >开始测试</el-button
        >
      </div>
      <div class="li">
        <el-button class="btn" type="success" round @click="jumpToHistory"
          >测试记录</el-button
        >
      </div>
      <div class="li">
        <el-button class="btn" type="danger" round @click="jumpToStatistics"
          >统计展示</el-button
        >
      </div>
      <div class="li">
        <el-button class="btn" type="warning" round @click="jumpToQuestions"
          >考题管理</el-button
        >
      </div>
      <div class="li">
        <el-button class="btn" type="info" round @click="handleAddClick"
          >危险按钮</el-button
        >
      </div>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import { mapState } from "vuex";

export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  computed: {
    ...mapState(["count"]),
  },
  methods: {
    handleAddClick() {
      this.$store.commit("increment");
    },
    jumpToQuestions() {
      this.$router.push("/questionManager");
    },
  },
};
</script>

<style lang="scss">
.container {
  // width: 90%;
  // height: 85%;
  padding: 60px;
  background-color: #fff;
  border-radius: 10px;
}
.ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.li {
  margin: 10px 0;
}

.btn {
  width: 200px;
}
</style>
